<template>
 <el-upload
    class="sign-upload"
    :on-success="onSuccess"
    :on-error="onError"
    :before-upload="handlebeforeUpload"
    v-bind="option">
     <el-icon class="el-icon-upload"></el-icon>
    <div class="el-upload__text">{{text}}<em>点击上传</em></div>
    <div class="el-upload__tip">支持 {{accept.split(',').join('、')}} 文件，不超过{{maxSize}}M</div>
</el-upload>
</template>
<script>
import {X_ACCESS_TOKEN, X_ACCESS_APP_ID} from '@/config/sysconsts'
import {
  getAuthToken
} from '@/utils/auth'
export default {
  props: {
    text: {type: String, default: '请将文件拖到此处'},
    maxSize: {type: Number, default: 2},
    accept: {type: String, default: 'image/png,image/jpeg,image/gif'},
    drag: {type: Boolean, default: true},
    multiple: {type: Boolean, default: false},
    action: {type: String, default: '/file/upload/single'},
    data: Object
  },
  computed: {
    option: {
      get () {
        let uploadOption = {}
        uploadOption.headers = {[X_ACCESS_APP_ID]: process.env.APP_ID, [X_ACCESS_TOKEN]: getAuthToken()}
        uploadOption.action = process.env.BASE_API + this.action
        uploadOption.accept = this.accept
        uploadOption.drag = this.drag
        uploadOption.data = this.data || {}
        console.log('uploadOption', uploadOption)
        return uploadOption
      }
    }
  },
  components: {},
  data () {
    return {
    }
  },
  methods: {
    onSuccess (res) {
      this.$emit('onSuccess', res)
    },
    onError (err) {
      this.$emit('onError', err)
    },
    handlebeforeUpload (file) {
      const isMaxSize = file.size / 1024 / 1024 < (this.maxSize || 2)
      if (!isMaxSize) {
        this.$msgBox.error(`上传大小不能超过 ${this.maxSize}MB!`)
      }
      return isMaxSize
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
